<template>
  <div :class="'detailBuy bgc-fff '+ (is_iphoneX?'iphonex':'')">
    <div class="detailBuy-about">
      <div>
        <i class="home-icon icon icon24" @click="toIndex"></i>
        <p>首页</p>
      </div>
      <div @click="toShare">
        <i class="share-icon icon icon24"></i>
        <p v-text="is_rebate?'分享有奖':'分享'"></p>
      </div>
    </div>
    <div class="detailBuy-buy">
      <!-- 注意：购买VIP/已下架 > VIP会员免费观看，就是这么xx -->
      <p v-if="is_audit==1 && is_vip==1" @click="learnNow">VIP会员免费观看</p>

      <div v-else-if="is_audit==1 && is_buy==0 && is_group==1" class="detailBuy-buy-group">
        <p @click="tobuy" v-if="is_group_status_join==false">
          <span>¥ {{price}}</span>
          <span>原价购买</span>
        </p>
        <p
          @click="tobuy('group')"
          v-if="is_group_status_join==false"
          :class="is_group_status?'':'disablex'"
        >
          <span>¥ {{group_price}}</span>
          <span>发起拼团</span>
        </p>
        <p v-else @click="show_share=true">邀请好友加入</p>
      </div>

      <div v-else style="display: flex; width: 100%;" class="detailBuy-buy-buy">
        <p @click="tovip" v-if="is_vip_switch==1" style="background-color: #67c23a;">
          购买VIP
          </p>

        <p @click="learnNow" v-if="buyshow==1">立即学习</p>

        <p @click="tobuy" v-else-if="buyshow==2" style="font-size:0.rem">
          <!-- ¥ {{price==0 ? "":price}}</br> -->
             立即购买
      
        </p>

        <p @click="OrderSubmitx" v-else-if="buyshow==3">立即报名</p>

        <p v-else-if="buyshow==4" class="disablex">已下架</p>
      </div>
    </div>

    <!-- 分享 -->
    <div class="contact-fenxiang" v-if="show_share">
      <div class="fenxiang-main">
        <div class="share-arrow"></div>
        <div class="share-text">
          <p>点击右上方 「···」，</p>
          <p>选择“发送给朋友”或</p>
          <p>选择“分享到朋友圈”，</p>
          <p>呼唤你的小伙伴，一起来学习吧！</p>
        </div>
      </div>
      <div class="fenxiang-close">
        <i class="fenxiang-closebtn ikonw" @click="show_share=false">我知道了</i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { OrderSubmit } from "api/api";
export default {
  props: {
    is_buy: {
      type: Number,
      default: null
    },
    is_vip: {
      type: Number,
      default: 0
    },
    is_vip_switch: {
      type: Number,
      default: 0
    },
    is_rebate: {
      type: Number,
      default: 0
    },
    is_audit: {
      type: Number,
      default: null
    },
    price: {
      type: String,
      default: 0
    },
    id: {
      //   type: Number, query里面是字符串 ==
      default: 0
    },
    // video、audio
    type: {
      type: String,
      default: null
    },

    /**
     *
     * 拼团
     *
     *  */

    // 是否参加拼团活动0:未参加1:参加
    is_group: {
      type: Number,
      default: 0
    },
    // 拼团状态0:未开始1:进行中
    is_group_status: {
      type: Number,
      default: 0
    },
    // 参团状态:false未参团true:已参团
    is_group_status_join: {
      type: Boolean,
      default: false
    },
    // 拼团价格
    group_price: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      buyshow: null,
      goods_type: null,
      show_share: false
    };
  },
  created() {
    this.initx();
  },
  methods: {
    initx() {
      // 注意：is_buy==1 > is_audit==0，下架之后只有is_buy==1的人 可以继续观看。
      if (this.is_audit==0 && this.is_buy==0) {
        this.buyshow = 4; //已下架
      } else if (this.is_audit==1 && this.is_buy==1) {
        this.buyshow = 1; //立即学习
      } else {
        if (this.price != "0.00") {
          this.buyshow = 2; //立即购买
        } else {
          this.buyshow = 3; //立即报名
        }
      }
      if (this.type == "video") {
        this.goods_type = 1;
      } else if (this.type == "audio") {
        this.goods_type = 2;
      }
    },
    learnNow() {
      this.$emit("learnNow");
    },
    toIndex() {
      this.$router.push("/");
    },
    toShare() {
      // 拼团就不参与分佣了
      if (this.is_group == 1) {
        this.$router.push({
          name: "RebateShare",
          query: { cid: this.id, goods_type: this.goods_type, type: "groupbuy" }
        });
      } else {
        this.$router.push({
          name: "RebateShare",
          query: { cid: this.id, goods_type: this.goods_type }
        });
      }
    },
    tovip() {
      this.$router.push({
        name: "MemberVip"
      });
    },
    tobuy(type) {
      if (type == "group") {
        if (this.is_group_status == 1) {
          window.location.href =
            "/wechat/ordersubmit/orderSubmit?type=course&id=" +
            this.id +
            "&goods_type=" +
            this.goods_type +
            "&group=new";
        } else {
          return;
        }
      } else {
        window.location.href =
          "/wechat/ordersubmit/orderSubmit?type=course&id=" +
          this.id +
          "&goods_type=" +
          this.goods_type;
      }
    },
    // 提交订单
    OrderSubmitx() {
      if (this.flag_orderSubmit) return;
      OrderSubmit({
        source: "wechat", // 订单来源
        coupon_code: "", // 优惠码
        is_switch: 0, // 是否开启积分兑换
        order_type: "course", // 订单类型
        item_id: this.id // 对应的id
      }).then(res => {
        if (res.code === 1) {
          this.flag_orderSubmit = true;
          this.$toast({ message: "报名成功", position: "bottom" });
          // 页面重新请求
          this.$emit("reload");
        } else {
          if (this.flag_orderSubmit) return;
          let message = res.message || "提交订单失败";
          this.$toast({ message: message, position: "bottom" });
        }
      });
    }
  },
  computed: {
    ...mapState(["img_url", "is_iphoneX"])
  }
};
</script>

<style scoped lang="scss">
// 购买按钮部分
.detailBuy {
  height: 0.5rem;
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  .iphonex {
    height: 0.8rem;
    padding-bottom: 0.3rem;
  }

  &-about {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    > div {
      width: 0.64rem;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      padding: 0.05rem 0;

      > p {
        font-size: 0.1rem;
        color: rgba(144, 147, 153, 1);
        line-height: 0.14rem;
      }

      &:first-child {
        border-right: 1px solid #f5f5f5;
      }
    }

    .home-icon {
      background: url("../../assets/images/menu-nav-home-icon.png") no-repeat
        center/contain;
    }
    .share-icon {
      background: url("../../assets/images/share-icon.png") no-repeat
        center/contain;
    }
  }

  &-buy {
    flex: auto;
    p,
    a {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.14rem;
      color: rgba(255, 255, 255, 1);
      line-height: 0.2rem;
      background-color: #0486fe;
      display: none;
      flex-wrap: wrap;
      display: flex;
    }
    &-group,
    &-buy {
      display: flex;
    }
    &-group {
      p {
        flex-direction: column;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        height: 0.5rem;
        &:nth-child(1) {
          background-color: #339999;
        }
        span {
          font-weight: normal;
        }
      }
    }
    .disablex {
      background-color: #909399;
    }
    .live-end {
      background-color: #cccccc;
    }
  }
}

// 分享
.contact-fenxiang {
  position: fixed;
  z-index: 10005;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10000;

  .share-arrow {
    width: 1.58rem;
    height: 1.05rem;
    display: inline-block;
    background: url("../../assets/images/share-tip.png") no-repeat center/cover;
    margin-top: 0.06rem;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .fenxiang-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 2.8rem;
  }

  .share-text p {
    color: #fff;
    font-size: 0.14rem;
    line-height: 0.3rem;
  }

  .ikonw {
    display: block;
    width: 1.28rem;
    height: 0.36rem;
    border: 0.01rem solid #fff;
    color: #ffffff;
    text-align: center;
    line-height: 0.36rem;
    border-radius: 0.04rem;
    font-size: 0.14rem;
    margin-top: 0.35rem;
  }
}
</style>